import React, { useEffect, useState } from 'react'
import { useLocation, useParams } from 'react-router-dom'
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { Search } from 'react-vant';
import { ProductCard, Tag, Button, ActionBar } from 'react-vant';

export default function Car() {
  const [value, setValue] = useState('');
  const location = useLocation();
  const params = useParams();
  useEffect(() => {
    console.log(location, 'location');
    console.log(params, 'params');

  }, [])
  return (
    <div>
      <header>
        <Search
          shape="round"
          background="#4fc08d"
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
      </header>
      <main>
        <ProductCard
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品名称"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        />


      </main>

      <footer>
      <div className='demo-action-bar'>
    <ActionBar>
      <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
      <ActionBar.Icon icon={<CartO />} badge={{ content: 5 }} text="购物车" />
      <ActionBar.Icon icon={<ShopO />} badge={{ content: 12 }} text="店铺" />
      <ActionBar.Button type="warning" text="加入购物车" />
      <ActionBar.Button type="danger" text="立即购买" />
    </ActionBar>
    </div>
      </footer>
    </div>
  )
}
